<template>
  <!-- 查看详情信息 -->
  <div class="dialog">
    <el-dialog
      :visible="dialogFormVisible"
      :close-on-click-modal="false"
      @close="closeDialog"
      width="720px"
    >
      <!-- 对话框头部 -->
      <div
        slot="title"
        class="header-title"
        style="background-color: #409eff; color: #fff"
      >
        <div style="padding: 15px 20px">{{ dialogHeaderName }}</div>
      </div>

      <!-- 课题详情 -->
      <el-form :model="dialogForm" v-if="dialogTopicForm">
        <el-form-item
          label="课题可选范围："
          :rules="rules"
          label-width="200px"
          prop="topicScope"
        >
          <el-input
            placeholder="课题可选范围"
            v-model="dialogForm.topicScope"
            autocomplete="off"
            style="width: 480px"
            :readonly="readonly"
            hide-required-asterisk="false"
          ></el-input>
        </el-form-item>
        <el-form-item label="课题可选专业：" :rules="rules" label-width="200px">
          <el-input
            placeholder="课题可选专业"
            v-model="dialogForm.topicMajor"
            autocomplete="off"
            style="width: 480px"
            :readonly="readonly"
          ></el-input>
        </el-form-item>
        <el-form-item label="课题标题：" :rules="rules" label-width="200px">
          <el-input
            placeholder="课题标题"
            v-model="dialogForm.topicName"
            autocomplete="off"
            style="width: 480px"
            :readonly="readonly"
          ></el-input>
        </el-form-item>
        <el-form-item label="课题简介：" :rules="rules" label-width="200px">
          <el-input
            placeholder="课题简介"
            type="textarea"
            v-model="dialogForm.topicIntroduction"
            autocomplete="off"
            style="width: 480px"
            :rows="8"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="课题要求(包括所具备的条件)："
          :rules="rules"
          label-width="200px"
        >
          <el-input
            placeholder="课题要求"
            type="textarea"
            v-model="dialogForm.topicRequire"
            autocomplete="off"
            style="width: 480px"
            :rows="8"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="课题工作量要求："
          :rules="rules"
          label-width="200px"
        >
          <el-input
            placeholder="课题工作量要求"
            type="textarea"
            v-model="dialogForm.topicWorkloadRequire"
            autocomplete="off"
            style="width: 480px"
            :rows="8"
          ></el-input>
        </el-form-item>
        <el-form-item label="课题性质：" :rules="rules" label-width="200px">
          <el-radio-group v-model="dialogForm.topicNature" style="width: 480px">
            <el-radio label="理论研究" name="type"></el-radio>
            <el-radio label="应用研究" name="type"></el-radio>
            <el-radio label="开发研究" name="type"></el-radio>
            <el-radio label="工程设计" name="type"></el-radio>
            <el-radio label="实验研究" name="type"></el-radio>
            <el-radio label="综合性研究" name="type"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="课题来源：" :rules="rules" label-width="200px">
          <el-radio-group v-model="dialogForm.topicSource" style="width: 360px">
            <el-radio
              label="A、教师已立项科研课题(纵向与横向)"
              name="type"
            ></el-radio>
            <el-radio
              label="B、结合企业和社会生产实践的课题"
              name="type"
            ></el-radio>
            <el-radio label="C、自行设计课题" name="type"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="第二指导老师：" :rules="rules" label-width="200px">
          <el-input
            placeholder="第二指导老师"
            v-model="dialogForm.secondGuideTeacher"
            autocomplete="off"
            style="width: 480px"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="论文研究方向："
          :rules="rules"
          label-width="200px"
          prop="thesisDirection"
        >
          <el-input
            placeholder="论文研究方向"
            v-model="dialogForm.thesisDirection"
            autocomplete="off"
            style="width: 480px"
          ></el-input>
        </el-form-item>
        <div class="sub-title" style="float: right; margin: -20px 40px 0 0">
          8/数据范围：0~17
        </div>
        <div
          class="sub-title"
          style="color: red; margin: 30px 40px 20px 200px; font-weight: 700"
        >
          每个研究方向最多8个汉字，最多写两个，以中英文分号分隔，总数不超过17个汉字。
        </div>
        <el-form-item
          label="是否专业第一届毕业生："
          :rules="rules"
          label-width="200px"
        >
          <el-radio-group v-model="dialogForm.firstGraduate">
            <el-radio label="是"></el-radio>
            <el-radio label="否"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="上传论文（设计）类型："
          :rules="rules"
          label-width="200px"
        >
          <el-radio-group v-model="dialogForm.thesisType">
            <el-radio label="毕业论文"></el-radio>
            <el-radio label="毕业设计"></el-radio>
            <el-radio label="涉密论文"></el-radio>
            <el-radio label="无"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <!-- 审核信息 -->
      <el-form :model="review" v-if="dialogReviewed">
        <el-form-item
          label="审核意见："
          :rules="[{ required: true, message: '不能为空' }]"
          label-width="200px"
          prop="opinion"
        >
          <el-input
            type="textarea"
            rows="8"
            v-model="review.opinion"
            autocomplete="off"
            style="width: 480px"
            :readonly="readonly"
            hide-required-asterisk="false"
          ></el-input>
        </el-form-item>
        <el-form-item label="审核状态：" label-width="200px">
          <el-radio-group v-model="review.status">
            <el-radio label="通过"></el-radio>
            <el-radio label="退回"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <!-- 课题名称修改 -->
      <el-form :model="topicNameChange" v-if="dialogTopicNameChange">
        <el-form-item
          label="原课题名称："
          label-width="200px"
          prop="oldTopicName"
        >
          <el-input
            v-model="topicNameChange.oldTopicName"
            autocomplete="off"
            style="width: 480px"
            :readonly="readonly"
            hide-required-asterisk="false"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="新课题标题："
          label-width="200px"
          prop="newTopicName"
        >
          <el-input
            v-model="topicNameChange.newTopicName"
            autocomplete="off"
            style="width: 480px"
            :readonly="readonly"
            hide-required-asterisk="false"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="变更理由："
          label-width="200px"
          prop="changeReason"
        >
          <el-input
            type="textarea"
            rows="5"
            v-model="topicNameChange.newTopicName"
            autocomplete="off"
            style="width: 480px"
            :readonly="readonly"
            hide-required-asterisk="false"
          ></el-input>
        </el-form-item>
      </el-form>

      <!-- 对话框表格信息 -->
      <!-- 对话框表单 -->
      <div v-if="dialogTable">
        <tableTool style="margin: 0 30px 0 29px" />
        <el-table
          :data="dialogTableData"
          border
          style="width: 661px; margin: 0 29px"
        >
          <el-table-column
            prop="id"
            width="50"
            align="center"
          ></el-table-column>
          <el-table-column prop="operator" label="操作人" width="120" sortable>
          </el-table-column>
          <el-table-column prop="role" label="角色" width="120" sortable>
          </el-table-column>
          <el-table-column
            prop="operationTime"
            label="操作时间"
            width="120"
            show-overflow-tooltip="true"
            sortable
          ></el-table-column>
          <el-table-column
            prop="operationType"
            label="操作类型"
            width="130"
            sortable
          >
          </el-table-column>
          <el-table-column prop="history" label="历史记录" width="120">
            <el-button type="mini">查看详情</el-button>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="page">
          <el-pagination
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            :pager-count="5"
            background
            layout="prev, pager, next, jumper,sizes, total"
            :total="400"
          >
          </el-pagination>
        </div>
      </div>

      <!-- 对话框尾部 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="closeDialog">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import tableTool from '@/components/Function/TableTool.vue';
export default {
  props: [
    'messages',
    'dialogHeaderName',
    'dialogTopicForm',
    'dialogFormVisible',
    'dialogReviewed',
    'dialogTopicNameChange',
    'dialogTable',
    'changeInput',
  ],
  components: { tableTool },
  data() {
    return {
      // 课题详情信息
      dialogForm: {
        topicScope: '',
        topicMajor: '',
        topicName: '',
        topicIntroduction: '',
        topicRequire: '',
        topicWorkloadRequire: '',
        topicNature: '',
        topicSource: '',
        secondGuideTeacher: '',
        thesisDirection: '',
        firstGraduate: '',
        thesisType: '',
      },

      // 审核信息
      review: {
        opinion: '',
        status: '',
      },

      // 对话框表格信息
      dialogTableData: [
        {
          id: 1,
          operator: '测试教师0922',
          role: '指导教师',
          operationTime: '2022-09-22 20:53:20',
          operationType: '提交',
        },
        {
          id: 2,
          operator: '测试教师0912',
          role: '系主任',
          operationTime: '2022-09-23 21:23:46',
          operationType: '提交',
        },
        {
          id: 3,
          operator: '测试教师0932',
          role: '评阅教师',
          operationTime: '2022-09-24 18:51:24',
          operationType: '提交',
        },
      ],

      // 修改课题名称信息
      topicNameChange: {
        oldTopicName: '',
        newTopicName: '',
        changeReason: '',
      },

      // 验证
      rules: [{ required: true, message: '不能为空' }],

      // 是否不能修改输入框里的内容
      readonly: true,
    };
  },
  mounted() {
    this.dialogForm.topicScope = this.messages.major;
    this.dialogForm.topicMajor = this.messages.major;
    this.dialogForm.topicName = this.messages.topicName;
    this.topicNameChange.oldTopicName = this.messages.topicName;
    this.readonly = this.changeInput;
  },

  methods: {
    closeDialog() {
      this.$emit('closeDialogFormVisible');
    },
  },
};
</script>

<style lang="less" scoped>
.dialog {
  ::v-deep .el-dialog__wrapper {
    // eslint-disable-line
    .el-dialog {
      .el-dialog__body {
        padding: 0px;
      }
      .el-dialog__header {
        padding: 0px;
        margin-bottom: 20px;
      }
      .el-dialog__headerbtn {
        top: 5px;
        right: 5px;
        padding-top: 10px;
      }
      .el-dialog__headerbtn .el-dialog__close {
        color: #fff;
        height: 30px;
        width: 35px;
      }
      .el-dialog__headerbtn .el-dialog__close:hover {
        color: gray;
      }

      .page {
        width: 649px;
        height: 40px;
        margin: 0 29px 20px;
        border: 1px solid #ebeef5;
      }
    }
  }
}

/deep/ .el-radio {
  display: inline-block;
  margin: 10px;
}
</style>
